<template>
  <section class="top-bar">
    <span class="unit-type">{{ label }}</span>
    <router-link class="unit-options" :to="`/category/${key}`">
      查看更多
      <n-icon size="18" style="margin-top: -1px;margin-left: 3px">
        <ArrowCircleRight24Filled></ArrowCircleRight24Filled>
      </n-icon>
    </router-link>
  </section>
  <section class="feeds-content">
    <FeedCard v-for="feed in feeds.infos" :info="feed"></FeedCard>
  </section>
</template>
<script setup lang="ts">
import { reactive } from '@vue/reactivity';
import { ArrowCircleRight24Filled } from '@vicons/fluent';
import FeedCard from '../product/FeedCard.vue';
import { getProducts } from '../../api/productApi';

const feeds = reactive({
  infos: []
});

const {
  unit: {
    label,
    key,
  } = {},
} = defineProps({
  unit: Object
});
getProducts({
  cid: key,
  limit: 10,
}).then((res) => {
  feeds.infos = res.data || [];
})
</script>
<style scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar .unit-type {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}

.top-bar .unit-options {
  font-size: 16px;
  line-height: 58px;
  color: #424242;
  transition: all 0.4s;
  display: flex;
  align-items: center;
}

.top-bar .unit-options:hover {
  color: #18a058aa;
}

.feeds-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column: auto;
  grid-gap: 14px;
}
</style>